<template>
  <div class="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control :titles="goodsTitle"
                 @selectItem="selectItem"
                 ref="topTabControl"
                 :class="{sticky: isTop}"
                 v-show="isTop"></tab-control>
    <!-- 首页内容 -->
    <Scroll class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            @pullingUp="getHomeGoods(curType)"
            :pullUpLoad="true">
      <HomeSwiper :banner="banner" @swiperImgLoad="swiperImgLoad"></HomeSwiper>
      <RecommendView :recommends="recommend"></RecommendView>
      <FeatureView></FeatureView>
      <tab-control :titles="goodsTitle"
                   @selectItem="selectItem"
                    ref="tabControl"></tab-control>
      <goods-list :goods="showGoods"></goods-list>
    </Scroll>
    <back-top @click.native="clickTop" v-show="show"></back-top>

  </div>
</template>

<script>
// 引入公共组件
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/common/tabcontrol/TabControl"
import Scroll from "components/common/scroll/Scroll"
// import backTop from "components/content/backTop/backTop";

// 引入home组件
import HomeSwiper from "./ChildComps/HomeSwiper";
import RecommendView from "./ChildComps/RecommendView";
import FeatureView from "./ChildComps/FeatureView"
import GoodsList from "components/content/goods/GoodsList";

// 引入网络请求模块
import {getHomeGoods, getHomeMultidata} from 'network/home.js'
// 引入工具方法
import {imgsLoadMixin,backTopMixin} from 'common/utils/mixins.js'

export default {
  name: "Home",
  mixins: [imgsLoadMixin,backTopMixin],
  components: {
    /*
    * 公共组件
    * */
    NavBar,
    TabControl,
    Scroll,
    // backTop,
    /*
    *  home组件
    * */
    HomeSwiper,
    RecommendView,
    FeatureView,
    GoodsList
  },
  data() {
    return {
      banner: [],
      recommend: [],
      goodsTitle: ['流行', '新款', '精选'],
      goods: {
        'pop': {
          page: 0,
          list: []
        }, 'new': {
          page: 0,
          list: []
        }, 'sell': {
          page: 0,
          list: []
        },
      },
      curType: 'pop',
      tabControlOffsetTop: 0,
      isTop: false,
      saveY: 0,
      // show: false
    }
  },
  computed: {
    showGoods() {
      return this.goods[this.curType].list
    }
  },
  methods: {
    /*
    * 网络请求相关方法
    *
    * */
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banner = res.data.banner.list
        this.recommend = res.data.recommend.list
      })
    },
    getHomeGoods(type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
      })
      if(page>1){
        this.$refs.scroll.finishPullUp()
      }
    },
    /*
    *
    * 事件相关方法
    * */
    selectItem(index) {
      switch (index) {
        case 0:
          this.curType = 'pop'
          break
        case 1:
          this.curType = 'new'
          break
        case 2:
          this.curType = 'sell'
      }
      // 处理两个tabcontrol不同步的方法
      this.$refs.tabControl.curIndex = index
      this.$refs.topTabControl.curIndex = index
    },

    contentScroll(position){
     this.listenShow(position)
     //  this.show = position.y <  -1000
      this.isTop = -position.y >= this.tabControlOffsetTop-40

    },
    swiperImgLoad() {
      // tabControl距离顶部的距离
      this.tabControlOffsetTop = this.$refs.tabControl.$el.offsetTop
    },
    // clickTop() {
    //   this.$refs.scroll.scrollTo(0,0,500)
    // },
    // listenShow(position) {
    //this.show = position.y <  -1000
    // }
  },
  created() {
    // 1. 请求多行数据
    this.getHomeMultidata(),

    // 2. 请求goods数据
    this.getHomeGoods('pop'),
    this.getHomeGoods('new'),
    this.getHomeGoods('sell')
  },
  mounted() {
    this.selectItem(0)
  },
  activated() {
    this.$refs.scroll.refresh()
    this.$refs.scroll.scrollTo(0,this.saveY,0)
  },
  deactivated() {
    this.$bus.$off('loadimg')
    this.saveY = this.$refs.scroll.getScrollY()
  }
}
</script>

<style scoped>
.sticky{
  position: fixed;
  top: 44px;
  z-index: 999;
}
.home {
  position: relative;
  padding-bottom: 49px;
}

.home-nav {
  color: #fff;
  background-color: var(--color-tint);
}
.content{
  overflow: hidden;
  /*height: 600px;*/
  height: calc(100vh - 93px);
}
</style>